<style lang="scss" scoped>
    .form-horizontal {
        .fb-row {
            position: relative;
            padding: 5px;
            border: 2px dashed #d9edf7;
            &:hover,
            &:focus,
            &.selector {
                border-color: darken(#d9edf7, 30%);
            }

            .fb-unit {
                &:first-child {
                    padding-left: 0px;
                }
                &:last-child {
                    padding-right: 0px;
                }

                .fb-control {
                    padding: 5px;
                    border: 2px dashed #dff0d8;
                    &:hover,
                    &:focus,
                    &.selector {
                        border-color: darken(#dff0d8, 30%);
                    }
                }
            }
        }
    }
</style>
<template>
    <div class="container-fluid">
        <div class="form-horizontal">
            <template v-for="row in formData.rows" v-if="!reload">
                <!-- 使用 current 控制已选行 -->
                <div class="form-group fb-row"
                     :class="{ 'selector': isSelectedRow(row.rowGid) }"
                     :data-row-gid="row.rowGid"
                     @click.self="setSelector({ rowGid: row.rowGid, unitGid: null })">
                    <template v-for="unit in row.units">
                        <div :class="'col-sm-' + unit.col" class="fb-unit">
                            <!-- 使用 current 控制已选控件 -->
                            <div :is="unit.unitType"
                                 :class="{ 'selector': isSelectedUnit(unit.unitGid) }"
                                 :unit="unit"
                                 :ref="unit.unitGid"
                                 @click.native="clickCallback({ rowGid: row.rowGid,
                                 unitGid:
                                 unit.unitGid })"></div>
                        </div>
                    </template>
                </div>
            </template>
        </div>
    </div>
</template>
<script>
    import _ from 'lodash'
    import { mapGetters, mapActions } from 'vuex'
    import TextboxUnit from './units/TextboxUnit.vue'
    import NumericTextboxUnit from './units/NumericTextboxUnit.vue'
    import DatePickerUnit from './units/DatePickerUnit.vue'
    export default {
        name: 'Workspace',
        components: {
            TextboxUnit,
            NumericTextboxUnit,
            DatePickerUnit
        },
        data () {
            return {
                clicks: 0,
                timer: null,
                delay: 700
            }
        },
        computed: {
            ...mapGetters({
                formData: 'formData',
                selector: 'selector',
                reload: 'reload'
            })
        },
        methods: {
            ...mapActions({
                setSelector: 'setSelector',
                showModal: 'showModal'
            }),
            /**
             * 是否时当前行
             * @param {string} gid 行gid
             * @returns {boolean}
             */
            isSelectedRow (gid) {
                return this.selector.rowGid === gid && _.isNil(this.selector.unitGid)
            },
            /**
             * 是否时当前控件
             * @param {string} gid 控件gid
             * @returns {boolean}
             */
            isSelectedUnit (gid) {
                return !_.isNil(this.selector.rowGid) && this.selector.unitGid === gid
            },
            /**
             * 单击和双击事件处理
             * @param payload 荷载
             */
            clickCallback (payload) {
                // 点击数累加
                this.clicks ++
                // 高亮选中
                this.setSelector(payload)
                // 单次点击
                if (this.clicks === 1) {
                    this.timer = setTimeout(() => {
                        // 计数器清零
                        this.clicks = 0
                    }, this.delay)
                } else {
                    clearTimeout(this.timer)
                    // 显示模态框
                    this.showModal(payload)
                    this.clicks = 0
                }
            }
        }
    }
</script>
